<template>
	<view class="content  bg-gradient-to-br from-gray-600 to-black pt-4">


		<u-row customStyle="margin: 10rpx" justify="space-between" gutter="10">
			<u-col span="6">
				<view class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2"
					style="border-radius: 15rpx;">
					<view class="flex items-center padding-sm radius text-center p-1 h-8" @click="toggleTab">
						<image class="w-8 h-8 ml-2  mr-4 "
							src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/J今.svg" alt="Profile Image" />
						<p class="text-white text-sm whitespace-nowrap"> {{ hl.lunarDate }}</p>
					</view>
					<u-line color="#fff"></u-line>
					<view class="flex items-center padding-sm radius text-center p-1 h-8">
						<image class="w-8 h-8 ml-2  mr-4 "
							src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/sloganSheng.svg"
							alt="Profile Image" />
						<p class="text-white text-sm whitespace-nowrap"> {{ hl.ganZhi }}</p>
					</view>
					<u-line color="#fff"></u-line>
					<view class="flex items-center padding-sm radius text-center p-1 h-8">
						<image class="w-8 h-8 ml-2  mr-4 "
							src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/太极.svg" alt="Profile Image" />
						<p class="text-white text-sm whitespace-nowrap"> {{ hl.daoli }}</p>
					</view>
					<u-line color="#fff"></u-line>
					<view class="flex items-center padding-sm radius text-center p-1 h-8">
						<image class="w-8 h-8 ml-2  mr-4 "
							src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/佛珠.svg" alt="Profile Image" />
						<p class="text-white text-sm whitespace-nowrap">佛歷{{ hl.foli }}</p>
					</view>

				</view>
			</u-col>
			<u-col span="6">
				<view class="flex flex-col items-start">
					<clock class="h-16" style="margin: 0 auto; text-align: center;" />
				</view>
				<view
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24"
					style="border-radius: 15rpx;" @click="open">
					<view class="c text-white p-2" v-if="qweather">
						<view class="left">
							<view class="left-top">
								<u-row>
									<u-col span="6">
										{{ city.replace('市', '') }}
									</u-col>
									<u-col span="6">
										{{
						qweather.temperature
					}}℃
									</u-col>
								</u-row>
								<u-line color="#fff"></u-line>
								<u-row>
									<u-col span="6">
										体感
									</u-col>
									<u-col span="6">
										{{
							qweather.feelst
						}}℃
									</u-col>
								</u-row>
							</view>

							<view class="left-bottom text-xs pt-4">
								{{
							qweather.direct + '-' + qweather.power + '/' +
							qweather.speed + '级'
						}}
							</view>
						</view>
						<view class="right">
							<view class="float-right" v-if="qweather.info == '晴'">

								<image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/clear-day.svg"
									style="width:120rpx;height:120rpx;"></image>
							</view>
							<view v-else-if="qweather.info == '多云'">
								<image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/cloudy.svg"
									style="width:120rpx;height:120rpx;"></image>
							</view>

						</view>
					</view>

				</view>
			</u-col>
		</u-row>
		<u-line color="#fff"></u-line>
		<u-row customStyle="margin: 10rpx" justify="space-between" gutter="10">
			<u-col span="6">
				<view v-if="hl"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;background-image: url(https://zt-1304966785.cos.ap-nanjing.myqcloud.com/ryi.png);background-size: 100%;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto">

					<view v-for="(o) in sortByLength(hl.ryilist)" v-bind:key="o"
						class=" h-4 m-1 p-1 bg-green-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>

			</u-col>
			<u-col span="6">
				<view v-if="hl"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;background-image: url(https://zt-1304966785.cos.ap-nanjing.myqcloud.com/rji.png);background-size: 100%;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto">

					<view v-for="(o) in sortByLength(hl.rjilist)" v-bind:key="o"
						class="h-4 m-1 p-1 bg-red-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;margin-top: 20rpx;" justify="space-between" gutter="10">
			<u-col span="6">
				<view v-if="hl"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;background-image: url(https://zt-1304966785.cos.ap-nanjing.myqcloud.com/syi.png);background-size: 100%;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto;">

					<view v-for="(o) in sortByLength(hl.syilist)" v-bind:key="o"
						class=" h-4 m-1 p-1 bg-green-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>

			</u-col>
			<u-col span="6">
				<view v-if="hl"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-28 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;background-image: url(https://zt-1304966785.cos.ap-nanjing.myqcloud.com/sji.png);background-size: 100%;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto">

					<view v-for="(o) in sortByLength(hl.sjilist)" v-bind:key="o"
						class="h-4 m-1 p-1 bg-red-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;margin-top: 20rpx;" justify="space-between" gutter="10">
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">喜神
						<view class="text-xs float-right  text-yellow-500" v-if="hl.fangWei">{{
						hl.fangWei[0].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>
					<view class="text-center" v-if="hl.fangWei">
						<image :src="getbagua(hl.fangWei[0].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">福神<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[3].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[3].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">财神<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[4].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[4].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;margin-top: 20rpx;" justify="space-between" gutter="10">
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">阳贵神<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[2].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[2].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm text-white margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">

					<u-row>
						<u-col span="6">
							<view class="p-1 text-center text-red-600">
								日
							</view>
						</u-col>
						<u-col span="6">
							<view class="p-1 text-center text-blue-600">
								月
							</view>
						</u-col>
					</u-row>
					<u-line color="#fff"></u-line>
					<u-row>
						<u-col span="6">
							<view class="p-1 " v-if="hl.fangWei">

								{{ hl.fangWei[5].split(':')[1] }}
							</view>
						</u-col>
						<u-col span="6">
							<view class="p-1" v-if="hl.fangWei">

								{{ hl.fangWei[6].split(':')[1] }}
							</view>
						</u-col>
					</u-row>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">阴贵神<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[3].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[3].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;margin-top: 20rpx;" justify="space-between" gutter="10">
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">年太岁<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[7].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[7].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">月太岁<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[8].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[8].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
			<u-col :span="4">
				<view style="border-radius: 15rpx;"
					class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="text-center p-2 text-white">日太岁<view class="text-xs float-right text-yellow-500"
							v-if="hl.fangWei">
							{{
						hl.fangWei[9].split(':')[1].split('=')[1] }}</view>
					</view>
					<u-line color="#fff"></u-line>

					<view class="text-center" v-if="hl.fangWei">
						<img :src="getbagua(hl.fangWei[9].split(':')[1].split('=')[0])"
							style="width: 64rpx;height: 100rpx;" />
					</view>
				</view>
			</u-col>
		</u-row>

		<view v-if="hl"
			class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 justify-between h-12 p-4 text-center text-white"
			style="border-radius: 15rpx;margin: 20rpx;display: flex; flex-wrap: wrap;padding-left: 100rpx;padding-right: 100rpx;">

			<view v-for="(o) in hl.ganZhi.split('-')" v-bind:key="o"
				class="h-4 m-1 p-4 text-white text-xs whitespace-nowrap text-center border-solid border-white bg-gray-500">
				{{ o }}
			</view>

		</view>

		<view v-if="hl"
			class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 justify-between h-8 p-4 text-center text-white mt-2"
			style="border-radius: 15rpx;margin: 20rpx;display: flex; flex-wrap: wrap;padding-left: 80rpx;padding-right: 80rpx;">

			<view v-for="(o) in hl.naYin.split('-')" v-bind:key="o" :class="[getClassByElement(o)]"
				class="h-4 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white">
				{{ o }}
			</view>
		</view>




		<view v-if="hl"
			class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 justify-between h-18 p-2 text-center text-white mt-2"
			style="border-radius: 15rpx;margin: 20rpx;">
			<view class="text-gray-300">{{ hl.pengZu }}</view>

			<view v-html="insertNewLines(hl.xiu[3])" class="text-xs mt-1"></view>
		</view>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">

					<view class="bg-purple-500">四方</view>
					{{ hl.siGong }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-border border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">星宿</view>{{ hl.xiu[0] + '-' + hl.xiu[2] }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">四神</view>{{ hl.siShen }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">七政</view>{{ hl.qiZheng }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">月相</view>{{ hl.yueXiang }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">值星</view>{{ hl.zhiXing }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">禄</view>{{ hl.lu }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">生肖</view>{{ hl.shengXiao }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">六耀</view>{{ hl.liuYao }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">旬空</view>{{ hl.xunKong[0] }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">旬空</view>{{ hl.xunKong[1] }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">旬空</view>{{ hl.xunKong[2] }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">天神</view>{{ hl.tianShen[0].split(':')[1] }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">时神</view>{{ hl.tianShen[1].split(':')[1] }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">日冲</view>{{ hl.chongSha[0].split(':')[1] }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">日煞</view>{{ hl.chongSha[1].split(':')[1] }}
				</view>
			</u-col>
		</u-row>
		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">时冲</view>{{ hl.chongSha[2].split(':')[1] }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">时煞</view>{{ hl.chongSha[3].split(':')[1] }}
				</view>
			</u-col>
		</u-row>

		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">节日</view>{{ hl.festivals == "" ? "无" : hl.festivals }}
				</view>
			</u-col>
			<u-col :span="6">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">其他节日</view>{{ hl.otherFestivals == "" ? "" : hl.otherFestivals }}
				</view>
			</u-col>
		</u-row>

		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col :span="3">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">节气</view>{{ hl.jieQi == "" ? "无" : hl.jieQi }}
				</view>
			</u-col>
			<u-col :span="4">
				<view v-if="hl.shuJiu" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">数九</view>{{ hl.shuJiu }}
				</view>
				<view v-if="hl.fu" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">三伏</view>{{ hl.fu }}
				</view>
			</u-col>
			<u-col :span="5">
				<view v-if="hl" style="border-radius: 15rpx;"
					class="text-center text-white mt-2 border-white border-2 border-solid p-1 rounded-sm scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200">
					<view class="bg-purple-500">物候</view>{{ hl.wuHou == "" ? "无" : hl.wuHou }}
				</view>
			</u-col>
		</u-row>



		<u-row customStyle="margin: 10rpx;" justify="space-between" gutter="10">
			<u-col span="6">

				<view v-if="hl"
					class="padding-sm margin-xs mt-2 radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto;">
					<view
						class="bg-purple-500 h-4 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						吉神</view>
					<view v-for="(o) in sortByLength(hl.jiShenXiongSha[0])" v-bind:key="o"
						class=" h-4 m-1 p-1 bg-gray-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>

			</u-col>
			<u-col span="6">

				<view v-if="hl"
					class="padding-sm margin-xs mt-2 radius bg-flex-shadow shadow-blur border-solid border-white border-2 h-24 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200"
					style="border-radius: 15rpx; display: flex; flex-wrap: wrap;padding-top: 20rpx;padding-left: 10rpx;overflow-y: auto">
					<view
						class="bg-purple-500 h-4 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						凶煞</view>
					<view v-for="(o) in sortByLength(hl.jiShenXiongSha[1])" v-bind:key="o"
						class="h-4 m-1 p-1 bg-gray-500 text-white text-xs whitespace-nowrap text-center border-solid border-white">
						{{ o }}
					</view>
				</view>
			</u-col>
		</u-row>
		<view v-if="hl"
			class="padding-sm margin-xs radius bg-flex-shadow shadow-blur border-solid border-white border-2 justify-between  p-4  text-white"
			style="border-radius: 15rpx;margin: 20rpx;">
			<view
				class="bg-purple-500 h-4 m-1 p-1 text-white text-xs whitespace-nowrap text-center border-solid border-white">
				九星</view>
			<view v-for="(o) in hl.jiuXing" v-bind:key="o"
				class=" m-1 p-1 text-white text-xs text-left border-solid border-white bg-gray-500">
				{{ o }}
			</view>

		</view>



		<!-- <u-datetime-picker ref="picker" :show="show" showToolbar="true" v-model="value1" mode="datetime" @confirm="confirm"
			@cancel="close"></u-datetime-picker> -->
		<yu-datetime-picker ref="picker" :value="datetime" :isAll="false" :current="false" @confirm="confirm">
		</yu-datetime-picker>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm2"
			@cancel="cancel2" :visible="visible" />
	</view>
</template>

<script>
import clock from "@/components/FlipClock.vue"
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
import "@/static/css/tailwind.css"

export default {
	components: {
		clock,
		cityPicker,
		yuDatetimePicker
	},
	data() {
		return {
			hl: {},
			qweather: {},
			show: false,

			value1: "",
			canvas: {
				width: 430,
				height: 430
			},
			L: 0, //基础半径
			timer: null,
			city: "沈阳市",
			visible: false,
			maskCloseAble: true,
			str: '',
			//defaultValue: '420103',
			defaultValue: ['河北省', '唐山市', '丰南区'],
			column: 2


		}
	},
	onLoad() {

		this.hl.fangWei = [];

		this.loadData();
		// 获取当前时间
		const now = new Date();
		// 计算下一个小时的第一分钟的时间
		const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 1, 0);
		// 计算当前时间到下一个小时第一分钟的时间差
		const duay = nextHour.getTime() - now.getTime();

		// 设置定时器，在时间差过去后调用loadData方法
		this.timer = setTimeout(() => {
			this.loadData();
			// 每隔一小时调用loadData方法
			setInterval(() => {
				this.loadData();
			}, 60 * 60 * 1000);
		}, duay);
		this.$nextTick(() => {
			this.$refs.picker.innerValue = new Date()


		})

	},
	computed: {


	},
	beforeDestroy() {
		clearInterval(this.timer)
		this.timer = null
	},
	methods: {
		sortByLength(array) {
			return array.sort(function (a, b) {
				return a.length - b.length;
			});
		},
		nav(type) {
			if (type == 2) {
				uni.switchTab({
					url: '/subPages/pages/weacher/index'
				})
			}
		},
		toggleTab(item, index) {
			this.$refs.picker.show();
		},

		open() {
			this.visible = true
		},
		confirm2(val) {

			let city = val.cityName;
			if (city == '市辖区') {
				city = val.provinceName;
			}
			//console.log(city)
			this.city = city;
			this.loadWeather(city)
			this.str = JSON.stringify(val)
			this.visible = false
		},
		cancel2() {
			this.visible = false
		},
		getClassByElement(element) {
			//console.log(element, element.includes('金'))
			if (element.includes('金')) {
				return 'bg-yellow-500'; // 假设金色对应的背景色是黄色
			} else if (element.includes('木')) {
				return 'bg-green-500'; // 木色对应的背景色是绿色
			} else if (element.includes('水')) {
				return 'bg-blue-500'; // 水色对应的背景色是蓝色
			} else if (element.includes('火')) {
				return 'bg-red-500'; // 火色对应的背景色是红色
			} else if (element.includes('土')) {
				return 'bg-brown-500'; // 土色对应的背景色是棕色
			}
			//return 'bg-gray-500'; // 默认背景色，如果没有匹配到任何一种
		},
		pickershow() {
			this.show = true;
			this.$refs.picker.innerValue = new Date()
		},
		async confirm(e) {
			//console.log('e', e)
			const timeFormat = uni.$u.timeFormat;
			let timeValue = await timeFormat(e.selectRes, 'yyyy-mm-dd hh:MM:ss');
			this.timeValue = timeValue;
			//console.log(timeValue);
			const data = {}
			this.$http.get("https://zhangteng.cloud:5001/api/Rss/GetDate?dete=" + timeValue + "", data, {
				showLoading: true
			}).then(res => {
				//console.log("🚀 ~ file: index.vue ~ line 33 ~ this.$http.post ~ res", res)
				this.hl = res.data;
				this.hl.ryi = this.hl.yj[0].join(', ');
				this.hl.ryilist = this.hl.ryi.split(',')
				this.hl.rji = this.hl.yj[1].join(', ');
				this.hl.rjilist = this.hl.rji.split(',')
				this.hl.syi = this.hl.yj[2].join(', ');
				this.hl.syilist = this.hl.syi.split(',')
				this.hl.sji = this.hl.yj[3].join(', ');
				this.hl.sjilist = this.hl.sji.split(',')
				this.hl.daoli = this.hl.dao.split('，')[0]
				this.hl.foli = this.hl.fo.split('(')[0].split('年')[0] + '年';
				uni.setNavigationBarTitle({
					title: this.hl.date + "|" + this.hl.week
				});

			})
		},
		//自己想要什么样的日期类型，以下作为参考
		// console.log(timeFormat(e.value, 'yyyy-mm-dd'));
		// console.log(timeFormat(e.value, 'yyyy-mm-dd hh:MM'));
		// console.log(timeFormat(e.value, 'yyyy-mm'));

		close() {
			this.show = false;
		},
		getbagua(str) {
			//console.log('str', str)
			if (str === "乾") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_乾.svg";
			}
			else if (str == "坤") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_坤.svg";
			}
			else if (str == "离") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_离.svg";
			}
			else if (str == "坎") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_坎.svg";
			}
			else if (str == "震") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_震.svg";
			}
			else if (str == "艮") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_艮.svg";
			}
			else if (str == "兑") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_兑.svg";
			}
			else if (str == "巽") {
				return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/八卦_巽.svg";
			}


		},
		insertNewLines(str) {
			var lines = str.split('，'); // 根据逗号和句号分割
			var line = "";
			for (var i = 0; i < lines.length; i += 4) {
				// 每四小句一行
				line += lines[i];
				if (i + 1 < lines.length) line += "，" + lines[i + 1];
				if (i + 2 < lines.length) line += "，" + lines[i + 2];
				if (i + 3 < lines.length) line += "，" + lines[i + 3];
				line += "<br>"; // 每四小句后加换行
			}
			//console.log('line', line)
			return line;
		},
		loadData() {
			//console.log('laodData')
			const data = {}
			this.$http.get("https://zhangteng.cloud:5001/api/Rss/GetLunarDate", data, {
				showLoading: true
			}).then(res => {
				//console.log("🚀 ~ file: index.vue ~ line 33 ~ this.$http.post ~ res", res)
				this.hl = res.data;
				this.hl.ryi = this.hl.yj[0].join(', ');
				this.hl.ryilist = this.hl.ryi.split(',')
				this.hl.rji = this.hl.yj[1].join(', ');
				this.hl.rjilist = this.hl.rji.split(',')
				this.hl.syi = this.hl.yj[2].join(', ');
				this.hl.syilist = this.hl.syi.split(',')
				this.hl.sji = this.hl.yj[3].join(', ');
				this.hl.sjilist = this.hl.sji.split(',')
				this.hl.daoli = this.hl.dao.split('，')[0]
				this.hl.foli = this.hl.fo.split('(')[0].split('年')[0] + '年';
				uni.setNavigationBarTitle({
					title: this.hl.date + "|" + this.hl.week
				});
				this.getLocation();
			})
		},
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					//console.log('当前位置的经度：' + res.longitude);
					//console.log('当前位置的纬度：' + res.latitude);
					// 获取到经纬度后，调用解析位置的函数
					this.getCityName(res.latitude, res.longitude);
				},
				fail: (err) => {
					uni.showToast({
						title: '获取位置失败:' + JSON.stringify(err),
						icon: 'none'
					});
					this.loadWeather('沈阳市')
				}
			});
		},
		getCityName(latitude, longitude) {
			// 这里以腾讯地图为例，需要替换为你的腾讯地图API Key
			const apiKey = 'IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5';
			const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${apiKey}`;

			uni.request({
				url: url,
				success: (res) => {
					//console.log('res', res)
					if (res.data.status === 0) {
						const city = res.data.result.address_component.city;
						this.city = city;
						this.loadWeather(city)
						//	console.log('当前城市：' + city);
						this.defaultValue = [];
						this.defaultValue.push(res.data.result.address_component.province)
						this.defaultValue.push(res.data.result.address_component.city)
						this.defaultValue.push(res.data.result.address_component.district)
						//console.log('this.defaultValue', this.defaultValue)
						uni.showToast({
							title: `当前城市: ${city}`,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '解析城市失败',
							icon: 'none'
						});
					}

				},
				fail: () => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				}
			});
		},
		loadWeather(city) {
			//console.log('loadWeather', city)
			this.$http.get("https://zhangteng.cloud:5001/api/Rss/GetWeather?cityName=" + city.replace('市', ''), {}, {
				showLoading: true
			}).then(res => {

				this.qweather = res.data;
				this.qweather.temperature = this.qweather.data.real.weather.temperature;
				this.qweather.feelst = this.qweather.data.real.weather.feelst;
				this.qweather.info = this.qweather.data.real.weather.info;
				this.qweather.direct = this.qweather.data.real.wind.direct;
				this.qweather.speed = this.qweather.data.real.wind.speed;
				this.qweather.power = this.qweather.data.real.wind.power;
				this.qweather.rain = this.qweather.data.real.weather.rain;
				this.qweather.humidity = this.qweather.data.real.weather.humidity;
				this.qweather.predict = this.qweather.data.predict;

				//console.log('this.qweather', this.qweather)
			});
		}

	}
}
</script>

<style>
.bg-brown-500 {
	background-color: #8B4513;
	/* 一个土色的例子 */
}

.content {

	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin: 200rpx auto 50rpx auto;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.clock {
	width: 300px;
	height: 300px;
}

#coolClockWrap {
	width: 100%;
	height: 100%;
	background: radial-gradient(#f8f6f5, #f7f5f4, #e4e3e2, #b9b8b7);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.c {
	display: flex;

}

.left {
	flex: 2;
	display: flex;
	flex-direction: column;
}

.left-top {
	flex: 1;

}

.left-bottom {
	flex: 1;

}

.right {
	flex: 1;

}
</style>
